<template>
	<view class="content">
		<view class="bar" :style="{ 'width': screenWidth + 'px' }">
			<view class="one" @click="select(1)">
				<image src="../../static/index.png" v-show="current!=1" mode=""></image>
				<image src="../../static/indexselect.png" v-show="current==1" mode=""></image>
				<view class="atxt" :style="{color:current==1?colorselect:''}">首页</view>
			</view>
			<view class="two" @click="select(2)">
				<image src="../../static/classify.png" v-show="current!=2"></image>
				<image src="../../static/classifyselect.png" v-show="current==2" mode=""></image>
				<view class="btxt" :style="{color:current==2?colorselect:''}">分类</view>
			</view>
			<view class="three" @click="select(3)">
				<image src="../../static/car.png" v-show="current!=3" mode=""></image>
				<image src="../../static/carselect.png" v-show="current==3" mode=""></image>
				<view class="ctxt" :style="{color:current==3?colorselect:''}">购物车</view>
			</view>
			<view class="four" @click="select(4)">
				<image src="../../static/me.png" v-show="current!=4" mode=""></image>
				<image src="../../static/meselect.png" v-show="current==4" mode=""></image>
				<!-- <image :src="conIndex==4?'@/static/meselect.png':'@/static/me.png'" ></image> -->
				<view class="dtxt" :style="{color:current==4?colorselect:''}">我的</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "tabbar-custom",
		props: ['current'], //接收父组件传递的参数
		data() {
			return {
				screenWidth: 0,
				colorselect:'#1296db' //选中后的文字颜色
			}
		},
		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					//console.log(res.windowWidth); //  能够使用的窗口宽度
					_this.screenWidth = res.windowWidth;
				}
			});

		},
		methods: {
			select(index) {
				//获取选中的下标（1首页，2分类，3购物车，4我的）用if判断下标为几就跳转到哪个页面 默认值为1首页
				console.log(index)
				if (index == 1) { //判断下标跳转页面
					uni.redirectTo({ //关闭当前页面跳转到其他页面
						url: '/pages/index/index'
					})
				} else if (index == 4) {
					uni.redirectTo({
						url: '/pages/me/me'
					})
				}

			}
		}
	}
</script>

<style>

	.bar {
		height: 130upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #000000;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.bar>.one>image {
		width: 65upx;
		height: 65upx;

	}

	.bar>.one>.atxt {

		font-size: 26upx;
		text-align: center;
	}

	.bar>.two>image {
		width: 65upx;
		height: 65upx;

	}

	.bar>.two>.btxt {
		font-size: 26upx;
		text-align: center;
	}

	.bar>.three>image {
		width: 65upx;
		height: 65upx;

	}

	.bar>.three>.ctxt {
		font-size: 26upx;
		text-align: center;
	}

	.bar>.four>image {
		width: 65upx;
		height: 65upx;

	}

	.bar>.four>.dtxt {
		font-size: 26upx;
		text-align: center;
	}
</style>